
<template>
  <div class="app">
    <div class="father">
      <span>我是{{father}}</span>
      <p>年龄是{{age1}}</p>
    </div>
    <div class="son">
      <span>我是{{son}}</span>
      <p>年龄是{{age2}}</p>
      <div class="hobbit">
        爱好是
        <span class="ho1">爱好一{{ho1}}</span>
        <span class="ho2">爱好二{{ho2}}</span>
      </div>
    </div>
  </div>
</template>

<script>
//vue 的组件核心代码：可以导出当前vue组件
export default {
   // vue的组件部分中的配置项
  data() {
    return {
      father: '父亲',
      son: '儿子',
      age1: '50',
      age2: '20',
      ho1: '唱',
      ho2: '跳',
    }
  },
}
</script>

<style scoped>
.father{
  width: 100px;
  height: 100px;
  background-color: #108b96;
  color: #1a2847;
}
.son{
  width: 100px;
  height: 120px;
  background-color: #87c0ca;
  color: #19325f;
}

</style>
